<template>
  <div>
    <div class="flyray-top flyray-top-left">
          <!-- 筛选条件 -->
          <div class="task_search">
            <el-select
              v-model="value2"
              size="small"
              class="task_select"
              placeholder="任务状态"
              @change="taskStatus()"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-model="patientId"
              class="task_select"
              size="small"
              style="margin-left:10px"
              placeholder="请选择患者"
              @change="checkPatient()"
            >
              <el-option
                v-for="item in patientNames"
                :key="item.value"
                :label="item.patientName"
                :value="item.patientId"
              ></el-option>
            </el-select>
            <el-button icon="el-icon-delete" size="small" style="margin-left:10px" @click="clearform">清空</el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              style="margin-bottom:2%"
              @click="addTaskClick"
            >新增</el-button>
          </div>
    </div>
    <div class="mainMsgPadding_Pro box main">
      <!-- 任务列表 -->
      <el-table
        v-if="overLoading"
        v-loading="loading"
        :border="true"
        :data="tableData"
        :header-cell-style="{background:'rgb(250, 250, 250)',color: 'rgba(0,0,0,.85)'}"
        stripe
        style="width: 100%;margin-bottom:20px;"
      >
        <el-table-column
          type="index"
          fixed
          label="序号"
          width="50"
          show-overflow-tooltip
          header-align="center"
          background="#000"
        ></el-table-column>
        <el-table-column
          prop="emergency"
          label="状态"
          show-overflow-tooltip
          header-align="center"
          width="80"
        >
          <template slot-scope="scope">
            <span
              :class="[scope.row.emergency==1?'task-status-1':'',scope.row.emergency==2?'task-status-2':'',scope.row.emergency==3?'task-status-3':'']"
            >{{ scope.row.emergency | emergencyFl }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="patientName"
          label="患者"
          show-overflow-tooltip
          header-align="center"
          width="100"
        ></el-table-column>
        <el-table-column prop="taskName" label="任务名称" show-overflow-tooltip header-align="center"></el-table-column>
        <el-table-column
          prop="progressBar"
          label="进度"
          show-overflow-tooltip
          header-align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.progressBar"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="计划时间" show-overflow-tooltip header-align="center" width="135">
          <template slot-scope="scope">
            <span
              prop="preEndTime"
              show-overflow-tooltip
              header-align="center"
            >结束: {{scope.row.preEndTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="开始/结束时间" show-overflow-tooltip header-align="center" width="135">
          <template slot-scope="scope">
            <span
              prop="endTime"
              show-overflow-tooltip
              header-align="center"
            >结束: {{scope.row.endTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="结果" show-overflow-tooltip header-align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.progressBar==100">{{ scope.row.result}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sourceItems"
          label="任务来源"
          show-overflow-tooltip
          header-align="center"
        >
          <template slot-scope="scope">{{ scope.row.sourceItems | fromObj }}</template>
        </el-table-column>
        <!-- 护士角色看到的操作框-->
        <el-table-column
          fixed="right"
          label="操作"
          width="250"
          :border="true"
          show-overflow-tooltip
          header-align="center"
        >
          <template slot-scope="scope">
            <el-button
              icon="el-icon-view"
              size="small"
              type="text"
              @click="details(scope.row.id)"
            >详情</el-button>
            <el-button
              icon="el-icon-edit"
              size="small"
              type="text"
              @click="taskEditClick(scope.row)"
            >编辑</el-button>

            <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="rowDel(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 任务新增对话框 -->
      <el-dialog
        :visible.sync="dialogAddVisible"
        :fullscreen="isFullscreen"
        :append-to-body="true"
        class="taks_edit"
        title="新增任务"
        @close="closeDialog('formList')"
      >
        <el-form ref="formList" :model="formList" :rules="rules">
          <el-form-item :label-width="formLabelWidth" label="任务名称" prop="taskName">
            <el-col :span="22">
              <el-input
                v-model="formList.taskName"
                class="input-with-select"
                :disabled="taskDisabled"
              >
                <el-select
                  v-model="select"
                  slot="append"
                  placeholder="任务模板"
                  clearable
                  @clear="taskTemplateClear()"
                  @change="taskTemplateChange()"
                >
                  <el-option
                    v-for="item in taskTemplateArr"
                    :key="item.templateContent"
                    :label="item.templateContent"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="任务描述" prop="taskDescribe">
            <el-col :span="22">
              <el-input
                v-model="formList.taskDescribe"
                auto-complete="off"
                :disabled="taskDisabled"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="患者姓名" prop="patientId">
            <el-select v-model="formList.patientId" placeholder="患者姓名" class="edit_input">
              <el-option
                v-for="item in patientNames"
                :key="item.patientName"
                :label="item.patientName"
                :value="item.patientId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" :span="22" label="任务状态" prop="emergency">
            <el-select v-model="formList.emergency" placeholder="任务状态" class="edit_input">
              <el-option label="正常" :value="1"></el-option>
              <el-option label="加急" :value="2"></el-option>
              <el-option label="紧急" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" :span="22" label="任务性质" prop="state">
            <el-select
              v-model="formList.state"
              placeholder="任务性质"
              class="edit_input"
              @change="stateChange(formList.state)"
            >
              <el-option label="正常任务" :value="1"></el-option>
              <el-option label="开始即结束" :value="3"></el-option>
              <!-- <el-option label="紧急" :value="3"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="预开始时间" prop="preStartTime">
            <el-col :span="22">
              <el-date-picker v-model="formList.preStartTime" type="datetime"  placeholder="选择预开始时间"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="预结束时间" prop="preEndTime">
            <el-col :span="22">
              <el-date-picker v-model="formList.preEndTime" type="datetime" placeholder="选择预结束时间"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSave('formList')">确 定</el-button>
          <el-button @click="closeAddDialog">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import top from '@/components/top/'
  export default {
    name: 'Index',
    components: {
      top
    },
    data() {
      return {
        overLoading: true,
        dialogAddVisible: false,
        formList: {
          taskName: "",
          patientId: "",
          state: "",
          taskDescribe: "",
          emergency: "",
          preStartTime: "",
          preEndTime: "",
          sourceItems: 2
        },
        tableData:[
          {"emergency":1}
        ]
      }
    },
    created() {
    },
    destroyed() {
    },
    mounted() {
    },
    methods: {
      // 新增按钮
      addTaskClick() {
        this.dialogAddVisible = true;
        getTaskTemplate().then(response => {
          this.taskTemplateArr = response.data.data;
        });
      }
    }
  }
</script>
<style scoped>

</style>
